<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
</head>
<body>
<div class="container" id="container"></div>
<script type="text/html" id="tpl_template">
<div>0：{id}</div>
<div>1：<a href="#/type/1">查看</a></div>
<div>2：<a href="#/type/2">查看</a></div>
</script>
<script src="./zepto.min.js"></script>
<script src="./router.min.js"></script>
<script type="text/javascript">
$(function() {
	var router = new Router({
        container: '#container',
        enterTimeout: 250,
        leaveTimeout: 250
    });
	
	// grid
	var home = {
        url: '/home',
        className: 'home',
        render: function () {
        	var id = 0;
        	alert(1);
        	var html = $('#tpl_template').html();
        	    html = html.replace('{id}', id); 
            return html
        },
        bind : function() {
        	alert(2);
        }
    };
	
    var type = {
        url: '/type/:id',
        className: 'type',
        render: function () {
        	var id = this.params.id;
        	var html = $('#tpl_template').html();
    	        html = html.replace('{id}', id); 
            return html;
        }
    };
    router.push(home).push(type).setDefault('/').init();
});
</script>
</body>
</html>
